/*
* @Description:可视化-数据交易情况Top5-数据查询量
* @Author: lil
* @Date: 2021/11/27
**/
<template>
  <div>
    <div id="dataQueryBarChart" style="width:100%;height:250px"></div>
  </div>
</template>
<script>
  import {
    getQueryInfo
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    data() {
      return {
        myChart: '',
        color: [],
        color0: '',
        color1: '',
        color2: '',
        color3: '',
        color4: '',
        show: false,
        structData: [],
        structTimesData: []
      };
    },
    mounted() {
      this.getAllQueryInfo();
      this.drawLine();
    },
    methods: {
      getAllQueryInfo() {
        getQueryInfo().then((res) => {
          this.structData = [];
          this.structTimesData = [];
          for (let i = 0; i < res.data.length; i++) {
            this.structData.push(res.data[i].structName);
            this.structTimesData.push({
              name: '',
              data: ''
            });
            this.structTimesData[i].name = res.data[i].structName;
            this.structTimesData[i].data = res.data[i].structNumber;
          }

          this.myChart.setOption({
            legend: {
              data: this.structData,
            }
          })
          let seriesall = [];
          for (let i = 0; i < res.data.length; i++) {
            seriesall.push({
              type: '',
              name: '',
              barWidth: '',
              barGap: '',
              data: '',
              itemStyle: ''
            });
            seriesall[i].type = 'bar';
            seriesall[i].name = this.structData[i];
            seriesall[i].barWidth = 2;
            seriesall[i].barGap = '1.5px';
            seriesall[i].data = this.structTimesData[i].data;
            seriesall[i].itemStyle = {
              normal: {
                color: this.color[i],
              }
            };
          }

          this.myChart.setOption({
            series: seriesall
          });

        }).then(

        ).catch((err) => {
          console.log(err);
        });
      },

      drawLine() {
        let _that = this;
        this.color[0] = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#17b5f7'
        }, {
          offset: 1,
          color: '#394ff5'
        }], false);

        this.color[1] = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#e75ff6'
        }, {
          offset: 1,
          color: '#9110c3'
        }], false);

        this.color[2] = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#ecec17'
        }, {
          offset: 1,
          color: '#f3b736'
        }], false);

        this.color[3] = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#31e491'
        }, {
          offset: 1,
          color: '#339f1a'
        }], false);

        this.color[4] = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#ff8a58'
        }, {
          offset: 1,
          color: '#ff5860'
        }], false);

        _that.myChart = _that.$echarts.init(document.getElementById('dataQueryBarChart'));
        _that.myChart.setOption({
          grid: [{
            left: '7%',
            bottom: '12%',
            top: '27%',
            right: '7%'
          }],
          legend: {
            itemWidth: 7,
            itemHeight: 2,
            icon: 'rect',
            textStyle: {
              color: 'rgba(161,161,225,.5)',
            },
            padding: [2, 0, 0, 0],
            // data: ['struct1','struct2','struct3','struct4','struct5'],
            data: _that.structData,
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(209,209,252,.4)'
              }
            },
            axisLabel: {
              show: true,
              rotate: 45
            },
            data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
          },
          yAxis: {
            name: '次',
            type: 'value',
            minInterval: 1,
            nameTextStyle: {
              padding: [0, 0, 0, -25]
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(209,209,252,.4)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#252c49'
              }
            }
          },
          series: []
        });
        window.onresize = () => {
          this.myChart.resize();
        }
      }
    },
  }

</script>
